<template>
  <div class="tabbar" id="tabbar"
   style="width:100%;height:.57rem;position:absolute;top:0;left:0;z-index:100">
    <div class="swiper-container">
      <ul class="swiper-wrapper">
        <li class="swiper-slide"
         v-for="(item,index) in tabbar"
          :key="index"
           @click="getData(item.categoryId)">
            <router-link to="">
              <img :src="item.pictureUrl">
              <p class="">{{item.categoryName}}</p>
            </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    tabbar: Array
  },
  methods: {
  	getData(id) {
  		console.log(id)
  		homeBus.$emit('categoryId',id)
  	}
  },
  mounted() {
    new Swiper('.tabbar .swiper-container',{
      slidesPerView: 4,
      freeMode: true,
      observer: true
    });
    
  }
}
</script>
<style lang="less" scoped>
.tabbar{
    height: .57rem;
    background-color: #fff;
    text-align: center;
    .swiper-container{
       padding: .1rem 0;
    }
    a{
        display: block;
        color: gray;
        width: 100%;
    }
    img{
        width:.15rem;
        margin: 0 auto .03rem;
    }
}
</style>
